// Component/Qrcode/index.js
const app = getApp();
Component({
  /**
   * 组件的属性列表
   */
  properties: {
  
    sharebg: String,  // 分享底部背景图
    headImg:String, //用户头像
    nickName: String, // 昵称
    
  },

  /**
   * 组件的初始数据
   */
  data: {
    title:'',
    visible:false,
    shareTitle:'', // 分享标题 为视频封面、
    shareeventTitle:'',//分享
    shareCoverImg:'', // 分享封面图
    shareQrImg: '', // 分享小程序二维码
    seeDate: '', //看视频日期
    isloading:false,
    tips:"扫码查看活动详情"
  },

  lifetimes: {
    // 生命周期函数，可以为函数，或一个在methods段中定义的方法名
    attached: function () {


    },
    created: function () {

    },
    ready: function () {

    },
    moved: function () {},
    detached: function () {},
  },

  /**
   * 组件的方法列表
   */
  methods: {

    loading(){
      this.setData({
        visible:true,
        isloading:true,
      });
    },

     createQrcode( shareTitle, shareCoverImg,shareQrImg,shareeventTitle){
          this.setData({
            shareTitle:shareTitle,
            shareCoverImg:shareCoverImg,
            shareQrImg:shareQrImg,
            shareeventTitle:shareeventTitle,
          });
            this.createQrcodefunc();
     },

      createQrcodefunc111(){

        let that = this;
       var timestamp = Date.parse(new Date());
      var date = new Date(timestamp);
     //获取年份  
       var Y = date.getFullYear();
       //获取月份  
       var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1);
       //获取当日日期 
        var D = date.getDate() < 10 ? '0' + date.getDate() : date.getDate();

        var time1 = Y + "-" + M + "-" + D;
      
        that.setData({
          title:"分享到朋友圈",
          seeDate: time1
        })
        console.log(that.data.nickName);
        // 创建画布
        const ctx = wx.createCanvasContext('shareCanvas',this)
        // 白色背景
        ctx.setFillStyle('#fff')
        ctx.fillRect(0, 0, 300, 400)
        ctx.draw(false)
        // 下载底部背景图
        
        wx.getImageInfo({
          src: that.data.sharebg,
          success: (res1) => {
            console.log(that.data.sharebg);
            ctx.drawImage(res1.path, 0, 320, 300, 130)
            // 下载视频封面图
            wx.getImageInfo({
              src: that.data.shareCoverImg,
              success: (res2) => {
                console.log(that.data.shareCoverImg);
                console.log(res2);
                var canvasinfo = {width:300, height:168};
                var rect = that.zoomImage({width:res2.width,height:res2.height},canvasinfo);
                console.log(rect);
                ctx.drawImage(res2.path, rect.dx,rect.dy,rect.dWidth,rect.dHeight);
                // 分享标题
                // ctx.setTextAlign('center')    // 文字居中
                ctx.setFillStyle('#000') // 文字颜色：黑色
                ctx.setFontSize(20) // 文字字号：20px
                if (that.data.shareTitle.length <= 14) {
                  // 不用换行
                  ctx.fillText(that.data.shareTitle, 10, 200, 280)
                } else if (that.data.shareTitle.length <= 28) {
                  // 两行
                  let firstLine = that.data.shareTitle.substring(0, 14);
                  let secondLine = that.data.shareTitle.substring(14, 27);
                  ctx.fillText(firstLine, 10, 200, 280)
                  ctx.fillText(secondLine, 10, 224, 280)
                } else {
                  // 超过两行
                  let firstLine = that.data.shareTitle.substring(0, 14);
                  let secondLine = that.data.shareTitle.substring(14, 27) + '...';
                  ctx.fillText(firstLine, 10, 200, 280)
                  ctx.fillText(secondLine, 10, 224, 280)
                }
                console.log(that.data.shareQrImg);
                // 下载二维码
                wx.getImageInfo({
                  src: that.data.shareQrImg,
                  success: (res3) => {
                    console.log(that.data.shareQrImg);
                    let qrImgSize = 80
                    ctx.drawImage(res3.path, 202, 226, qrImgSize, qrImgSize)
                    ctx.stroke()
                    ctx.draw(true)
                    // 用户昵称
                    ctx.setFillStyle('#000') // 文字颜色：黑色
                    ctx.setFontSize(14) // 文字字号：16px
                    ctx.fillText(that.data.nickName, 38, 284)
                    // 观看日期
                    ctx.setFillStyle('#999') // 文字颜色：黑色
                    ctx.setFontSize(10) // 文字字号：16px
                    ctx.fillText('在' + that.data.seeDate + '分享到朋友圈', 38, 298)
                    // 下载用户头像
                    wx.getImageInfo({
                      src: that.data.headImg,
                      success: (res4) => {
                        console.log(that.data.headImg);
                        // 先画圆形，制作圆形头像(圆心x，圆心y，半径r)
                        ctx.arc(22, 284, 12, 0, Math.PI * 2, false)
                        ctx.clip()
                        // 绘制头像图片
                        let headImgSize = 24
                        ctx.drawImage(res4.path, 10, 272, headImgSize, headImgSize)
                        // ctx.stroke() // 圆形边框
                        ctx.draw(true);
                       //that.savetophone();
                      },
                      fail:(res5)=>{
                        console.log(res5);
                      }
                    })
                  },
                  fail:(res4s)=>{
                    console.log(res4s);
                  }
                })
              }
            })
          }
        });
        this.setData({
          isloading:false,
        });
      },

      createQrcodefunc(){

        let that = this;
       var timestamp = Date.parse(new Date());
      var date = new Date(timestamp);
     //获取年份  
       var Y = date.getFullYear();
       //获取月份  
       var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1);
       //获取当日日期 
        var D = date.getDate() < 10 ? '0' + date.getDate() : date.getDate();

        var time1 = Y + "-" + M + "-" + D;
      
        that.setData({
      
          seeDate: time1
        })
        console.log(that.data.nickName);
        // 创建画布
        const ctx = wx.createCanvasContext('shareCanvas',this)
        // 白色背景
        ctx.setFillStyle('#fff')
        ctx.fillRect(0, 0, 400, 652)
        ctx.draw(false)
     
          // 下载视频封面图
        wx.getImageInfo({
          src: that.data.shareCoverImg,
          success: (res1) => {
            console.log(that.data.shareCoverImg);
            ctx.drawImage(res1.path, 38, 130, 320, 196)
            var canvasinfo = {width:320, height:196};
            var rect = that.zoomImage({width:res1.width,height:res1.height},canvasinfo);
            console.log(rect);
            //ctx.drawImage(res1.path, rect.dx,rect.dy,rect.dWidth,rect.dHeight);

             // 分享标题
                // ctx.setTextAlign('center')    // 文字居中
                ctx.setFillStyle('#000') // 文字颜色：黑色
                ctx.setFontSize(20) // 文字字号：20px
                if (that.data.shareTitle.length <= 14) {
                  // 不用换行
                  ctx.fillText(that.data.shareTitle,120, 90, 250)
                } else if (that.data.shareTitle.length <= 28) {
                  // 两行
                  let firstLine = that.data.shareTitle.substring(0, 14);
                  let secondLine = that.data.shareTitle.substring(14, 27);
                  ctx.fillText(firstLine, 120, 90, 250)
                  ctx.fillText(secondLine, 120, 114, 250)
                } else {
                  // 超过两行
                  let firstLine = that.data.shareTitle.substring(0, 14);
                  let secondLine = that.data.shareTitle.substring(14, 27) + '...';
                  ctx.fillText(firstLine, 120, 90, 250)
                  ctx.fillText(secondLine, 120, 114, 250)
                }
                console.log(that.data.shareQrImg);

                // 分享活动标题
                // ctx.setTextAlign('center')    // 文字居中
                ctx.setFillStyle('#000') // 文字颜色：黑色
                ctx.setFontSize(26) // 文字字号：20px
                if (that.data.shareeventTitle.length <= 14) {
                  // 不用换行
                  ctx.fillText(that.data.shareeventTitle, 51, 365, 400)
                } else if (that.data.shareeventTitle.length <= 28) {
                  // 两行
                  let firstLine = that.data.shareeventTitle.substring(0, 14);
                  let secondLine = that.data.shareeventTitle.substring(14, 27);
                  ctx.fillText(firstLine, 51, 365, 400)
                  ctx.fillText(secondLine, 51, 402, 400)
                } else {
                  // 超过两行
                  let firstLine = that.data.shareeventTitle.substring(0, 14);
                  let secondLine = that.data.shareeventTitle.substring(14, 27) + '...';
                  ctx.fillText(firstLine, 51, 365, 400)
                  ctx.fillText(secondLine, 51, 402, 400)
                }
                console.log(that.data.shareeventTitle);

             // 下载二维码
             wx.getImageInfo({
              src: that.data.shareQrImg,
              success: (res3) => {
                console.log(that.data.shareQrImg);
                let qrImgSize = 125
                ctx.drawImage(res3.path, 125, 400, qrImgSize, qrImgSize)
                ctx.stroke()
                ctx.draw(true)
                // 用户昵称
                ctx.setFillStyle('#008b8b') // 文字颜色：棕色
                ctx.setFontSize(20) // 文字字号：16px
                ctx.fillText(that.data.nickName,120 , 61)
                // 观看日期
                //ctx.setFillStyle('#999') // 文字颜色：黑色
                //ctx.setFontSize(10) // 文字字号：16px
                //ctx.fillText('在' + that.data.seeDate + '分享到朋友圈', 38, 298)
                 // tips
                ctx.setFillStyle('#00cccc') // 文字颜色：黑色
                ctx.setFontSize(18) // 文字字号：16px
                ctx.fillText( that.data.tips , 115, 550)
                // 下载用户头像
                wx.getImageInfo({
                  src: that.data.headImg,
                  success: (res4) => {
                    console.log(that.data.headImg);
                    // 先画圆形，制作圆形头像(圆心x，圆心y，半径r)
                    ctx.arc(68, 68, 34, 0, Math.PI * 2, false)
                    ctx.clip()
                    // 绘制头像图片
                    let headImgSize = 68
                    ctx.drawImage(res4.path, 33, 34, headImgSize, headImgSize)
                    // ctx.stroke() // 圆形边框
                    ctx.draw(true);
                   //that.savetophone();
                  },
                  fail:(res4)=>{
                    console.log(res4);
                  }
                })
             },
              fail:(res3)=>{
                console.log(res3);
              }
            })
          }
        })
        
        this.setData({
          isloading:false,
        });
      },

      closeShare(){
        this.setData({
          visible:false,
        });
        
      },

      clearcanvans(){
        const ctx = wx.createCanvasContext('shareCanvas',this)
         // 白色背景
         ctx.setFillStyle('#fff')
         ctx.fillRect(0, 0, 300, 400)
         ctx.draw(false,function(){
          console.log('ctx');
          console.log(ctx);
         })
      
      },

      savetophone(){
        var that = this;
        // 保存到相册
        wx.canvasToTempFilePath({
         canvasId: 'shareCanvas',
         success: function (res) {
           wx.saveImageToPhotosAlbum({
             filePath: res.tempFilePath,
             success: function (res) {
               console.log("分享图片已保存到相册,请到朋友圈选择图片发布");
               wx.showToast({
                 title: '分享图片已保存到相册,请到朋友圈选择图片发布'
               });
                 // 清空画布
                // this.clearcanvans();
             }
           })
         }
       }, this)
     },

     zoomImage(imageinfo,canvasinfo){
      if(imageinfo.width / imageinfo.height == canvasinfo.width/canvasinfo.height){
          return {
            dx :0, 
            dy:0,
            dWidth:canvasinfo.width,
             dHeight:canvasinfo.height
          }
      }
      else if( (imageinfo.width * (canvasinfo.width/imageinfo.width) )  > canvasinfo.width){ //宽度太大 按照高度来缩放

        console.log(anvasinfo.width/imageinfo.widt);
              var dheight = imageinfo.height *  (canvasinfo.width/imageinfo.width) ;
              var dy = (canvasinfo.height-dheight)/2;
              return {
                dx :0, 
                dy:dy,
                dWidth:canvasinfo.width,
                 dHeight:dheight
              }
      }
      else {    //高度太大
       
        var dWidth = imageinfo.width *  (canvasinfo.height/imageinfo.height) ;
        var dx = (canvasinfo.width-dWidth)/2;
        return {
          dx :dx, 
          dy:0,
          dWidth:dWidth,
           dHeight:canvasinfo.height
        }
      }
 }
  },

 

})
